<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			桂民市集商户认证
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-nurse-fill" style="color:#999;font-size:16px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="nurse-fill"></i-icon> -->
				商户认证
			</view>
			<view class="r30">
				<button>
					<i class="ri-add-circle-fill" style="color:#fff;font-size:12px;"></i>
					<!-- <i-icon size="20upx" color="#FFF" name="add-circle-fill"></i-icon> -->
					商户认证
				</button>
			</view>
		</view>
		<view class="p-table">
			<view class="bc" style="margin-bottom: 10px;">
				<!-- <input type="text" v-model="search.keyword" placeholder="输入关键字"
					style="width: 300px;margin-right: 15px;" /> -->
				<picker class="p-box" mode="selector" :range="['无','待审核','已通过','已拒绝']"
					@change="search.businessState=['','待审核','已通过','已拒绝'][$event.detail.value]">
					<view v-html="search.businessState||`<font color=#666>状态</font>`"></view>
				</picker>
				<view class="p-date-box">
					<picker mode="date" value="2022-01-01" @change="search.startDate=$event.detail.value"
						class="p-date">
						<view>{{search.startDate||`开始日期`}}</view>
					</picker>
					<text>到</text>
					<picker mode="date" value="2022-01-01" @change="search.endDate=$event.detail.value" class="p-date">
						<view>{{search.endDate||`结束日期`}}</view>
					</picker>
					<button type="button" class="p-btn" @click="search.startDate='';search.endDate='';">重置</button>
				</view>
				<button class="r10" type="button" @click="getBusinessAuthList(1)">搜索</button>
				<export-excel v-if="page.records && page.records.length>0" :data="page.records" name="表格.xls"
					:fields="excelFields">
					<button class="b-dell">导出表格</button>
				</export-excel>
			</view>
		</view>
		<view class="p-table">
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th>编号</th>
					<th>称呼</th>
					<th>联系电话</th>
					<th>公司名称</th>
					<th>品牌名称</th>
					<th>所在行业</th>
					<th>提交时间</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in page.records" :key="index">
					<td>{{item.id}}</td>
					<td>{{item.agentName}}</td>
					<td>{{item.phone}}</td>
					<td>{{item.companyName}}</td>
					<td>{{item.brandName}}</td>
					<td>{{item.industryName}}</td>
					<td>{{item.createDatetime}}</td>
					<td>{{item.stateComment}}</td>
					<td>
						<view v-if="item.state=='WAIT_REVIEW'" class="bz">
							<button @click="approveAuth(item)" class="r10">
								<i class="ri-pencil-fill" style="color:#fff;"></i>
								审核通过
							</button>
							<button class="b-dell" @click="showModel=1;node=item;finishMsg='';">
								<i class="ri-delete-bin-line" style="color:#333;"></i>
								拒绝
							</button>
						</view>
					</td>
				</tr>
				<tr v-if="page.records.length===0">
					<td colspan="6" style="text-align: center;color:#9c9c9c; ">数据为空</td>
				</tr>
			</table>
			<view class="bz">
				<Pagination :total="page.total" :pageSize="page.size" :nowPage="page.current" @change="alterCurrent">
				</Pagination>
			</view>
		</view>
		<view v-if="showModel==1" class="popup-layer">
			<view class="win-card">
				<view class="" style="text-align: center;line-height:40px;border-bottom:1px solid #ccc;">拒绝理由</view>
				<view class="">
					<textarea v-model="finishMsg" maxlength="200" placeholder="请输入拒绝理由,不超过200字符"
						style="height:300px;width:auto;margin:10px;border:1px solid #ccc;"></textarea>
				</view>
				<view style="display:flex;">
					<button style="width:50%;justify-content:center;height:40px;background-color:#eee;color:#000;"
						@tap="showModel=0">取消</button>
					<button style="width:50%;justify-content:center;height:40px;" @tap="rejectAuth(node)">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that;
	import Pagination from "@/components/pagination.vue"
	import exportExcel from '@/components/json-2-excel/Json2Excel.vue'
	export default {
		components: {
			Pagination,
			exportExcel
		},
		data() {
			return {
				page: {
					records: [],
					current: 1,
					size: 10,
					pages: 0,
					total: 0
				},
				showModel: 0,
				node: '',
				finishMsg: '',
				search: {
					businessState: '',
					startDate: '',
					endDate: ''
				},
				excelFields: {},
				businessState: [{
					value: 'SUCCESS',
					comment: '已通过'
				}, {
					value: 'FAIL',
					comment: '已拒绝'
				}, {
					value: 'WAIT_REVIEW',
					comment: '待审核'
				}]
			}
		},
		onLoad() {
			that = this
			this.getBusinessAuthList()
		},
		methods: {
			rejectAuth(item) {
				if (!this.finishMsg) {
					uni.showToast({
						title: '拒绝理由不能为空',
						icon: "none",
						duration: 3000
					})
					return
				}
				uni.request({
					url: this.baseURL + '/marketBusiness/rejectAuth',
					method: "PUT",
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						businessId: item.id,
						finishMsg: this.finishMsg
					},
					success(res) {
						// console.log(res.data)
						if (res.data.success == true) {
							that.getBusinessAuthList(that.page.current, that.page.size)
							that.showModel = 0
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 3000
							})
						}
					}
				})
			},
			//审核通过
			approveAuth(item) {
				uni.request({
					url: this.baseURL + '/marketBusiness/approveAuth?businessId=' + item.id,
					method: "PUT",
					header: {
						token: uni.getStorageSync('token')
					},
					success(res) {
						// console.log(res.data)
						if (res.data.success == true) {
							that.showModel = 0
							that.getBusinessAuthList(that.page.current, that.page.size)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 3000
							})
						}
					}
				})
			},
			//获取商户资料
			getBusinessAuthList(current, size) {
				let params = "?current=" + (current || 1) + "&size=" + (size || 10)
				for (let key in this.search) {
					if (this.search[key]) {
						params += '&' + key + '=' + this.search[key]
					}
				}
				uni.request({
					url: this.baseURL + '/marketBusiness/getBusinessList' + params,
					method: 'GET',
					header: {
						token: uni.getStorageSync('token')
					},
					success(res) {
						if (res.statusCode == 200 && res.data.success == true) {
							let data = res.data.data
							// console.log("商户资料", data.records)
							for (let item of data.records) {
								for (let temp of that.businessState) {
									if (temp.value == item.state) {
										item['stateComment'] = temp.comment
										break
									}
								}
							}
							that.page.records = data.records
							that.page.current = parseInt(data.current)
							that.page.size = parseInt(data.size)
							that.page.pages = parseInt(data.pages)
							that.page.total = parseInt(data.total)
						}
					}
				})
			},
			alterCurrent: function(c) {
				if (c) {
					if (c <= this.page.pages && c >= 1) {
						thid.getBusinessAuthList(c, this.page.size)
					}
				}
			}
		}
	}
</script>

<style>
	.popup-layer {
		display: flex;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(184, 184, 184, 0.8);
		justify-content: center;
		align-items: center;
	}

	.win-card {
		display: block;
		width: 600px;
		height: 400px;
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 6px;
	}

	.p-box {
		border: 1px solid #ddd;
		border-radius: 6px;
		margin: 10px;
		height: 36px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px;
		font-size: 12px;
	}
</style>
